<template>
  <div class="all"
    v-loading="loading"
    element-loading-text="页面正在加载中..."
    element-loading-background="rgba(0, 0, 0, 0.8)"
    :element-loading-lock="true">
    <div class="mainFrame" :style="'height: ' + innerHeight + 'px'">
      <div class="titleAll">
        <!--标题-->
        <div class="title">欢迎使用众辉汽车维修管理系统</div>
        <!--渐变直线-->
        <div style="display: flex; width: 80%; margin: 0 auto">
          <div class="gradient-line-toleft"></div>
          <div class="gradient-line-toright"></div>
        </div>
        <!--底层一行三列-->
        <div class="underPart">
          <!--第一列-->
          <div style="width: 15%">
            <div class="itemBt"><button class="button1" @click="bt1Click()">维修单管理</button></div>
            <div class="itemBt"><button class="button2" @click="bt2Click()">配件档案管理</button></div>
            <div class="itemBt"><button class="button3" @click="bt3Click()">日志查看</button></div>
          </div>
          <!--第二列-->
          <div style="width: 45%;padding-right:10px;">
            <div style="margin-bottom: 5px; display:flex;">
             <div class="iconfont icon-liebiao1" style="font-size: 20px;margin-right: 5px;"></div>
              <div>维修单列表</div>
            </div>
            <div class="gradient-line-toright-title" style="margin-bottom: 10px; "></div>
            <el-table :data="tbdata" stripe style="width: 100%">
              <template v-for="(item, index) in tbcols" :key="index">
                <el-table-column
                  :align="item.align"
                  :prop="item.prop"
                  :label="item.label"
                  :width="item.width"
                >
                </el-table-column>
              </template>
            </el-table>
          </div>
          <div style="width: 40%;padding-left:10px;">
            <div style="margin-bottom: 5px;display:flex;">
              <div class="iconfont icon-rizhi" style="font-size: 20px;margin-right: 5px;"></div>
              <div>日志列表</div>
            </div>
            <div class="gradient-line-toright-title" style="margin-bottom: 10px; "></div>
            <el-table :data="tbdata2" stripe style="width: 100%">
              <template v-for="(item, index) in tbcols2" :key="index">
                <el-table-column
                  :align="item.align"
                  :prop="item.prop"
                  :label="item.label"
                  :width="item.width"
                >
                </el-table-column>
              </template>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="home">
import moment from 'moment';
import http from '@/api/http'
import { onMounted, ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
const innerHeight = ref(window.innerHeight - 120)
const loading = ref(false)


const emit = defineEmits([
        'tabAdd'
    ])        

const bt1Click = () =>{
  emit('tabAdd',155);
}

const bt2Click = () =>{
  emit('tabAdd',156);
}

const bt3Click = () =>{
  emit('tabAdd',154);
}


//定义表格列的信息
let tbcols: any[] = [
  { prop: 'riqi', label: '日期', width: 100, align: 'left' },
  { prop: 'danhao', label: '单号', width: 160, align: 'center' },
  { prop: 'car_carno', label: '车牌号', width: 110, align: 'center' },
  { prop: 'car_kname', label: '客户名称', width: null, align: 'center' },
  { prop: 'jiesuanfangshiValue', label: '结算方式', width: 90, align: 'center' }
]
//定义表格数据
let tbdata: any[] = reactive([])

//定义表格列的信息
let tbcols2: any[] = [
  { prop: 'Content', label: '日志内容', width: null, align: 'left' },
  { prop: 'Category', label: '日志分类', width: 80, align: 'center' },
  { prop: 'MenuModel', label: '所在模块', width: 90, align: 'center' },
  { prop: 'Creator', label: '操作人', width: 90, align: 'center' },
  { prop: 'CreateDate', label: '操作时间', width: 100, align: 'center' }
]
//定义表格数据
let tbdata2: any[] = reactive([])

//重新执行分页
const reloadData = async () => {
  loading.value = true
  await loadData().then((res) => {
    tbdata.splice(0, tbdata.length)
    tbdata.push(...res.miyaoData)
    
    tbdata2.splice(0, tbdata.length)
    tbdata2.push(...res.logData)
    loading.value = false
  })
}

async function loadData() {
  //第一步：加载分页数据
  const arr = await loadMiyaoData() 
  const arrLog = await loadLogData() 
  return {miyaoData:arr,logData:arrLog};
}


async function loadMiyaoData() {
  const arr = []
  const res = await http.get('api/qx_wxd_nr/GetListJson', {}, false, { params: {topNum:10} })
  if (res.Tag == 1) {
    //alert(JSON.stringify(res.Data));
    res.Data.forEach(item => {
      item.riqi = moment(item.riqi).format('YYYY-MM-DD')
      Object.assign(item,{jiesuanfangshiValue:item.jiesuanfangshi==0?'现金':'挂账'});
    });
    arr.push(...res.Data)
  } else {
    ElMessage({
      message: '系统异常，操作失败！',
      type: 'error'
    })
  }
  return arr
}

async function loadLogData() {
  const arr = []
  const res = await http.get('api/operatelog/GetListJson', {}, false, { params: {topNum:7} })
  if (res.Tag == 1) {
    //alert(JSON.stringify(res.Data));
    res.Data.forEach(item => {
      item.CreateDate = moment(item.CreateDate).format('YYYY-MM-DD')
    });
    arr.push(...res.Data)
  } else {
    ElMessage({
      message: '系统异常，操作失败！',
      type: 'error'
    })
  }
  return arr
}


//页面初始化加载完成钩子
onMounted(async () => {
  await reloadData()
})





</script>
<style lang="less" scoped>
.itemBt {
  height: 90px;
  margin-left:15px;
  margin-right:30px;
  margin-bottom: 40px;
}
.underPart {
  display: flex;
  text-align: left;
  margin-top: 60px;
  margin-left: 10px;
  margin-right: 10px;
}
.all {
  //background-color: #f3f3f3;
  padding: 5px;
}
/*背景色镜像渐变效果，可按照百分比设置中心点位置 */
.mainFrame {
  padding: 5px;
  background-image: radial-gradient(circle at 50% 15%, #fff, #e7e7e7);
}
.titleAll {
  height: 30%;
  padding-top: 20px;
  width: 100%;
  text-align: center;
}
.title {
  font-size: 40px;
  margin: 5px;
  margin-bottom: 20px;
}
/*线性渐变效果*/
.gradient-line-toright {
  width: 50%; /* 直线的宽度 */
  height: 2px; /* 直线的高度 */
  background: linear-gradient(to right, red, #00a1e0, #fff); /* 渐变色从左到右 */
}
.gradient-line-toleft {
  width: 50%; /* 直线的宽度 */
  height: 2px; /* 直线的高度 */
  background: linear-gradient(to left, red, #00a1e0, #fff); /* 渐变色从左到右 */
}

.button1 {
  background-image: linear-gradient(to right, #ff512f, #dd2476);
  border: none;
  color: white;
  padding: 15px 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 24px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
  transition: background-image 0.5s ease;
  width: 100%;
  margin: 0 auto;
  height: 100%;
}

.button1:hover {
  background-image: linear-gradient(to left, #ff512f, #dd2476);
}

.button2 {
  background-image: linear-gradient(to right, #ffe638, #dcc100);
  border: none;
  color: white;
  padding: 15px 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 24px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
  transition: background-image 0.5s ease;
  width: 100%;
  margin: 0 auto;
  height: 100%;
}

.button2:hover {
  background-image: linear-gradient(to left, #ffe638, #dcc100);
}

.button3 {
  background-image: linear-gradient(to right, #00a1e0, #006e99);
  border: none;
  color: white;
  padding: 15px 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 24px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
  transition: background-image 0.5s ease;
  width: 100%;
  margin: 0 auto;
  height: 100%;
}

.button3:hover {
  background-image: linear-gradient(to left, #00a1e0, #006e99);
}


.gradient-line-toright-title {  
  height: 1px; /* 直线的高度 */
  background: linear-gradient(to right, red, #00a1e0); /* 渐变色从左到右 */
}


</style>
